<template>
  <div class="commen">
    <div class="commen_head">
      <div class="ico"></div>
      <div class="name">
        {{ userName }}
      </div>
      <div class="grade" v-for="index of gradeIco" :key="index">
        <i class="el-icon-star-on" style="color: #f5b85a;font-size: 40px;"></i>
      </div>
    </div>
    <div class="commen_main">
      <div class="text">
        <p>
            {{ userText }}
        </p>
      </div>
      <div class="day">
        2023-02-22 21:25:15
      </div>
      <div class="reply">
        [官方商城回复]：友不在多，贵在风雨同行；情不论久，重在有求必应。好缘分不会输给时间，好朋友来了以后就不会再走。您对vivo的支持，我们将回报您十分惊喜！
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      gradeIco: "",
      userName: "",
      num:1,
      userText:"",
      text:[
        {
            text:"收到了，最近忙了些，今天才来评价。我一直用ViⅤO，用习惯了，感觉没有哪里不方便的，添置手机也懒得去选了，直接在官网买一台自己需要的型号，Ⅹ6→X9→x20→X50→，一直沒失望过，相信这次的X90也好用！",
            id:1
        },
        {
            text:"喜欢这款机型很久了，正好这次出了白色情人款，就果断入手了，真机手感真的很棒！加上白色的配色，简直美爆了！very nise！",
            id:2
        },
        {
            text:"四年前从苹果换成vivo，一直都用的这个品牌，这是买的第三个vivo了，国产手机中性价比很高的手机，操作顺畅，拍照像数超赞，后盖在灯光照射下还有六芒星的图案，超级漂亮",
            id:3
        },
        {
            text:"手机收到了，手感不错，漂亮，内存大，充电快，像素高，拍照好看，处理器强大。一直在用vivo手机，以后会继续支持",
            id:4
        },
        {
            text:"手机收到后很喜欢，性价比很高，白色绝了，之前买了红色，又买的给朋友，屏幕流畅，晚上灯光照射下会有六芒星图案，非常满意",
            id:5
        },
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {
    this.gradeIco = Math.round(Math.random() * (5 - 2) + 2);
    this.userName = Math.random().toString(36).slice(-8);
    this.userText=this.text[Math.round(Math.random() * (4 - 0) + 0)].text
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.commen {
  width: 100%;
  height: 300px;
  padding: 50px 0px 60px;
  border-bottom: 1px solid #e4e4e4;
  .commen_head {
    width: 500px;
    height: 50px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    .ico {
      width: 50px;
      height: 50px;
      margin-right: 20px;
      border-radius: 50%;
      border: 1px solid black;
    }
    .name {
      font-size: 15px;
      margin-right: 20px;
    }
  }
  .commen_main {
    width: 85%;
    height: 250px;
    margin: 20px 0px 20px 180px;
    display: flex;
    flex-direction: column;
    .text {
      width: 100%;
      float: right;
      text-align: start;
      margin: 10px 0px;
      p{
        font-size: 18px;
        line-height: 30px;
        word-wrap: normal;
      }
    }
    .day{
        width: 170px;
        height: 20px;
        color: #e4e4e4;
        font-size: 15px;
    }
    .reply{
        width: 100%;
        height: 80px;
        margin: 20px 0px;
        text-align: start;
        padding: 0px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f7f7f5;
    }
  }
}
</style>